<script setup>
import { ref } from "vue"
import { useApi } from "@/composables/useApi.js"
import { router } from "@/plugins/1.router/index.js"

const form = reactive({
  inputValue: '',
  inputType: 1,
  inputTypeSelect: [
    {
      label: '姓名',
      value: 1,
    },
    {
      label: '学号',
      value: 2,
    },
  ],
  inputTypeStatus: true,
})
let list = ref([])
let total = ref(0)//总数
let queryFrom = ref({ page: 1, limit: 8, title: '' })

const getList = async () => {
  console.log(queryFrom.value)
  const { data } = await useApi('/teacher/Api.Mass/index').post({ ...queryFrom.value })
  total.value = data.value.data.total
  list.value = data.value.data.data.map(item => {
    return {
      ...item, id: item.standardization_id,
    }
  })
  console.log(list.value)
}
getList()
const page = ref(1)
const search = () => {
  queryFrom.value.page = 1
  getList()
}
const goDetail = (val) => {
  console.log('detail')
  router.push(`/community/communityDetail?mass_id=${val.mass_id}&title=${val.title}`)
}
</script>

<template>
  <div class="content">
    <div class="header-box">
      <div class="title">
        <div>社团列表</div>
        <div class="sub-title">总共有{{ total }}个社团</div>
      </div>
      <div class="search">

        <VTextField
          v-model="queryFrom.title"
          single-line
          placeholder="搜索"
          variant="plain"
          max-width="180px"
          style="block-size: 27px;margin-block-start: -36px;margin-inline-start: 10px;"
        />

        <i
          @click="search"
          class="ri-search-line cursor-pointer"
          style="block-size: 18px;inline-size: 18px;margin-inline-start: auto;"
        />
      </div>

    </div>
    <div style="display: flex;flex-wrap: wrap;justify-content: space-between;margin-top:20px;">
      <VRow>
        <VCol cols="3" v-for="(item, index) in list" :key="index">
          <custom-image-text-item
            @click="goDetail(item)"
            :value="item"
          ></custom-image-text-item>
        </VCol>
        <!--       下面写暂无数据-->
        <VCol cols="12" v-if="total===0">
          <div class="text-center">暂无数据</div>
        </VCol>

      </VRow>
    </div>
    <v-pagination
      v-model="page"
      :length="Math.floor(total/queryFrom.limit)"
      rounded="circle"
      class="pagination"
    ></v-pagination>
  </div>
</template>


<style scoped lang="scss">
@use "@configured-variables" as variables;
:root {
  --v-theme-surface: 255, 255, 255; /* 示例值 */
  --text-opposite: rgb(
      calc(255 - var(--v-theme-surface-r)),
      calc(255 - var(--v-theme-surface-g)),
      calc(255 - var(--v-theme-surface-b))
  );
}
.content {
  position: relative;
  min-height: 85vh;
  background-color: rgb(var(--v-theme-surface));
  padding: 0 10px;
}

.header-box {
  background-color: rgb(var(--v-theme-surface));
  display: flex;
  align-items: center;
  height: 62px;
  padding: 12px 0 12px 24px;
  border-radius: 8px 8px 0 0;

  .title {
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

    .sub-title {
      font-size: 14px;
      color: var(--text-opposite);
    }
  }

  .tabs {
    margin-left: 30px;
    display: flex;
    align-items: center;

    .active {

      background-color: rgba(140, 87, 255, 0.16);
      border-radius: 6px;
      color: rgba(140, 87, 255, 1);
    }

    .item {
      padding: 22px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      font-size: 16px;
      align-items: center;
      width: 128px;
      height: 38px;
      margin-right: 4px;
      cursor: pointer;

      > i {
        font-size: 18px;
        margin-right: 4px;
      }
    }
  }
}

.search {
  display: flex;
  align-items: center;
  margin-left: auto !important;
  border-radius: 74px;
  inline-size: 291px;
  margin-inline-start: 40px;
  padding-block: 8px;
  padding-inline: 16px;
  margin-right: 20px;
  background-color: variables.$vertical-nav-background-color;
}

.pagination {
  position: absolute;
  bottom: 20px;
  left: 500px;
}

</style>
